<script setup lang="ts">
import MenuItem, { MenuOption } from './MenuItem.vue';

interface Props {
    options?: MenuOption[];
}

withDefaults(defineProps<Props>(), {
    options: () => [],
});

interface Emits {
    (event: 'onClick', value: MenuOption): void;
}

const emits = defineEmits<Emits>();

const modelValue = defineModel({
    default: <MenuOption>{
        label: '',
        value: '',
    },
});

function handleMenuClick(menu: MenuOption) {
    modelValue.value = menu;
    emits('onClick', menu);
}
</script>

<template>
    <ul class="flex justify-end gap-x-[21px]">
        <template
            v-for="item in options"
            :key="item.label"
        >
            <MenuItem
                :option="item"
                :active="item.value === modelValue.value"
                @click="() => handleMenuClick(item)"
            />
        </template>
    </ul>
</template>

<style scoped></style>
